// src/components/TransferSelector.js
import React, {useState, useEffect} from 'react';

const TransferSelector = ({
                              data,
                              initialSelected = [],
                              leftTitle = "待选项",
                              rightTitle = "已选项",
                              showSearch = true
                          }) => {
    const [leftItems, setLeftItems] = useState([]);
    const [rightItems, setRightItems] = useState([]);
    const [leftFilter, setLeftFilter] = useState('');
    const [rightFilter, setRightFilter] = useState('');
    const [leftSelected, setLeftSelected] = useState([]);
    const [rightSelected, setRightSelected] = useState([]);

    // 初始化数据
    useEffect(() => {
        const selectedKeys = initialSelected;
        const left = data.filter(item => !selectedKeys.includes(item.key));
        const right = data.filter(item => selectedKeys.includes(item.key));
        setLeftItems(left);
        setRightItems(right);
    }, [data, initialSelected]);

    // 过滤左侧数据
    const filteredLeftItems = leftItems.filter(item =>
        item.label.toLowerCase().includes(leftFilter.toLowerCase())
    );

    // 过滤右侧数据
    const filteredRightItems = rightItems.filter(item =>
        item.label.toLowerCase().includes(rightFilter.toLowerCase())
    );

    // 左侧全选/取消全选
    const toggleLeftAll = () => {
        if (leftSelected.length === filteredLeftItems.length) {
            setLeftSelected([]);
        } else {
            setLeftSelected(filteredLeftItems.map(item => item.key));
        }
    };

    // 右侧全选/取消全选
    const toggleRightAll = () => {
        if (rightSelected.length === filteredRightItems.length) {
            setRightSelected([]);
        } else {
            setRightSelected(filteredRightItems.map(item => item.key));
        }
    };

    // 左侧单个选择
    const toggleLeftItem = (key) => {
        setLeftSelected(prev =>
            prev.includes(key)
                ? prev.filter(k => k !== key)
                : [...prev, key]
        );
    };

    // 右侧单个选择
    const toggleRightItem = (key) => {
        setRightSelected(prev =>
            prev.includes(key)
                ? prev.filter(k => k !== key)
                : [...prev, key]
        );
    };

    // 移动到右侧
    const moveToRight = () => {
        if (leftSelected.length === 0) return;

        const itemsToMove = leftItems.filter(item => leftSelected.includes(item.key));
        const newLeftItems = leftItems.filter(item => !leftSelected.includes(item.key));
        const newRightItems = [...rightItems, ...itemsToMove];

        setLeftItems(newLeftItems);
        setRightItems(newRightItems);
        setLeftSelected([]);
    };

    // 移动到左侧
    const moveToLeft = () => {
        if (rightSelected.length === 0) return;

        const itemsToMove = rightItems.filter(item => rightSelected.includes(item.key));
        const newRightItems = rightItems.filter(item => !rightSelected.includes(item.key));
        const newLeftItems = [...leftItems, ...itemsToMove];

        setLeftItems(newLeftItems);
        setRightItems(newRightItems);
        setRightSelected([]);
    };

    // 全部移动到右侧
    const moveAllToRight = () => {
        setRightItems([...rightItems, ...leftItems]);
        setLeftItems([]);
        setLeftSelected([]);
    };

    // 全部移动到左侧
    const moveAllToLeft = () => {
        setLeftItems([...leftItems, ...rightItems]);
        setRightItems([]);
        setRightSelected([]);
    };

    return (
        <div className="transfer-selector">
            <div className="transfer-panel left-panel">
                <div className="panel-header">
                    <div className="header-content">
                        <input
                            type="checkbox"
                            checked={leftSelected.length > 0 && leftSelected.length === filteredLeftItems.length}
                            onChange={toggleLeftAll}
                            indeterminate={leftSelected.length > 0 && leftSelected.length !== filteredLeftItems.length}
                        />
                        <span className="panel-title">
              {leftTitle} ({leftItems.length})
            </span>
                    </div>
                    {showSearch && (
                        <div className="search-box">
                            <input
                                type="text"
                                placeholder="搜索..."
                                value={leftFilter}
                                onChange={(e) => setLeftFilter(e.target.value)}
                            />
                            <i className="search-icon">🔍</i>
                        </div>
                    )}
                </div>

                <div className="panel-content">
                    {filteredLeftItems.length === 0 ? (
                        <div className="empty-placeholder">暂无数据</div>
                    ) : (
                        filteredLeftItems.map(item => (
                            <div
                                key={item.key}
                                className={`item ${leftSelected.includes(item.key) ? 'selected' : ''}`}
                                onClick={() => toggleLeftItem(item.key)}
                            >
                                <input
                                    type="checkbox"
                                    checked={leftSelected.includes(item.key)}
                                    onChange={() => toggleLeftItem(item.key)}
                                />
                                <span className="item-label">{item.label}</span>
                            </div>
                        ))
                    )}
                </div>
            </div>

            <div className="transfer-actions">
                <button
                    className="action-btn"
                    onClick={moveToRight}
                    disabled={leftSelected.length === 0}
                    title="添加选中项"
                >
                    &gt;
                </button>
                <button
                    className="action-btn"
                    onClick={moveAllToRight}
                    disabled={leftItems.length === 0}
                    title="添加全部"
                >
                    &gt;&gt;
                </button>
                <button
                    className="action-btn"
                    onClick={moveToLeft}
                    disabled={rightSelected.length === 0}
                    title="移除选中项"
                >
                    &lt;
                </button>
                <button
                    className="action-btn"
                    onClick={moveAllToLeft}
                    disabled={rightItems.length === 0}
                    title="移除全部"
                >
                    &lt;&lt;
                </button>
            </div>

            <div className="transfer-panel right-panel">
                <div className="panel-header">
                    <div className="header-content">
                        <input
                            type="checkbox"
                            checked={rightSelected.length > 0 && rightSelected.length === filteredRightItems.length}
                            onChange={toggleRightAll}
                            indeterminate={rightSelected.length > 0 && rightSelected.length !== filteredRightItems.length}
                        />
                        <span className="panel-title">
              {rightTitle} ({rightItems.length})
            </span>
                    </div>
                    {showSearch && (
                        <div className="search-box">
                            <input
                                type="text"
                                placeholder="搜索..."
                                value={rightFilter}
                                onChange={(e) => setRightFilter(e.target.value)}
                            />
                            <i className="search-icon">🔍</i>
                        </div>
                    )}
                </div>

                <div className="panel-content">
                    {filteredRightItems.length === 0 ? (
                        <div className="empty-placeholder">暂无数据</div>
                    ) : (
                        filteredRightItems.map(item => (
                            <div
                                key={item.key}
                                className={`item ${rightSelected.includes(item.key) ? 'selected' : ''}`}
                                onClick={() => toggleRightItem(item.key)}
                            >
                                <input
                                    type="checkbox"
                                    checked={rightSelected.includes(item.key)}
                                    onChange={() => toggleRightItem(item.key)}
                                />
                                <span className="item-label">{item.label}</span>
                            </div>
                        ))
                    )}
                </div>
            </div>
        </div>
    );
};

export default TransferSelector;